<template>
<div>
    <div class="memberherade" >
          <router-link to="/minepage/mine"><img style="margin-left:4%;margin-top:5%;float:left" src="/src/assets/微信图片_20220829174837.png"/></router-link>
          <span style="line-height:55px">会员中心</span>
    </div>
    <div class="memberbottom" style="background-color:FFFFFF">
        <div class="memberbottom-1">
            <div style="width:100%;margin-top:10%;float:left"><span style="color:#fac800;font-size:18px;margin-left:6%">会员卡</span><router-link to="/memberCashier"><button style="border:0px;color:#ec7d69;width:70px;height:25px;font-size:14px;border-radius:20px;background:#FFFFFF;margin-left:52%">立即开通</button></router-link></div>
            <div style="width:100%;float:left;margin-top:9%;"><span style="color:#c19c07;font-size:10px;margin-left:6%">开通预计省</span><span style="color:#c19c07;font-size:18px;margin-left:2%"><b>￥2000.00</b></span></div>
            </div>
        <div style="width:100%;margin-top:5%;text-align: center;"><span style="color:#5a5a5a">会员专享权益</span></div>    
        <div style="display: flex;justify-content: space-around;flex-flow: wrap;margin:auto;margin-top:2%">
            <div v-for="item in arr" :key="item" style="text-align:center;width:80px;margin-top:4%">
                <div style="border:0px solid;background-color:#fdf2f0;border-radius:50%;width:40px;height:40px;text-align:center;line-height:40px;margin:auto"><img :src="item.src"/></div>
                <p><span style="font-size:12px">{{item.span}}</span></p>
                <p><span style="font-size:12px;color:#cdcdcd">{{item.span2}}</span></p>
            </div>
        </div>
        <div style="width:100%;margin-top:6%;text-align:center;">
            <button style="border:0px;color:#FFFFFF;background-color:#ec7b67;width:90%;height:45px;border-radius:5px;font-size:14px">立即开通￥999.00</button>
        </div>
    </div>
    <div class="memberfoot">
        <div style="width:100%;text-align:center;margin-top:5%">会员专享</div>
    
        <div class="minifoot-1-2" v-for="item in arr1" :key="item" >
          <div style="width:90%;height:90%;margin-top:3%;float:left;margin-left:3%" >
          <img src="/src/assets/微信图片_20220829160908.png" style="width:90px;height:90px;float:left;"/>
          <div style="width:210px;height:90px;float:left;float:left;margin-left:5%;background-color:#FFFFFF"  >
            <span>【皮秒激光】皮秒嫩肤保湿去黄提亮无刺激科学…</span>
            <p><span style="font-size:10px;color:#cccccc">李金明,北京华瑞整形医院</span></p>
            <p><span style="font-size:10px;color:#cccccc;float:left">会员价</span><span style="color:red;float:left"><b>￥999.0</b></span></p>
          </div>
          </div>
        </div> 
    
    </div>
</div>
</template>

<script setup lang='ts'>
import { ref } from "@vue/reactivity";

    let arr=ref([
        {'src':'/src/assets/微信图片_20220901190224.png',span:'大额优惠卷',span2:'每单省￥200.0'},
        {'src':'/src/assets/微信图片_20220901190227.png',span:'超低折扣',span2:'所有项目适用'},
        {'src':'/src/assets/微信图片_20220901190230.png',span:'专享红包',span2:'每月大额红包'},
        {'src':'/src/assets/微信图片_20220901190233.png',span:'会员礼包',span2:'会员专享礼包'},
        {'src':'/src/assets/微信图片_20220901190236.png',span:'大额优惠卷',span2:'每单省￥200'},
        {'src':'/src/assets/微信图片_20220901190238.png',span:'抄底折扣',span2:'所有项目适应'},
        {'src':'/src/assets/微信图片_20220901190243.png',span:'专享红包',span2:'每月大额红包'},
        {'src':'/src/assets/微信图片_20220901190246.png',span:'会员礼包',span2:'会员专享礼包'}
    ])
let arr1=ref([1,2,3,4,5,6,7,8])
</script>

<style>
    .memberherade{width: 100%;height:50px;float: left;text-align: center;position:flex;}
    .memberbottom{width: 100%;  float: left;background-color: #FFFFFF;}
    .memberbottom-1{width: 90%;height: 150px;background: linear-gradient(90deg,#0f0f0f,#2f2f2f,#3f3f3f);margin: auto;border-radius: 10px;}
    .memberfoot{width: 100%;background: #f2f2f2;float:left;margin-top:5%}
    .div2{background-color: #FFFFFF;margin-left:6%}
    .minifoot-1-2{width: 100%;height: 110px;background-color: #ffffff;margin-top: 4%;border-radius: 5px;}
</style>